<template>
	<section class="progress-wrapper" ref="$progress">
		<div class="current">{{ currentTime }}</div>
		<div class="progress">
			<view class="bg" id="bg">
				<movable-area style="width: 100%; height: 100%">
					<div class="played" :style="{ width: progressWidth }">
						<movable-view
							:x="sliderX"
							class="slider"
							direction="horizontal"
							@change="handleStep"
						></movable-view>
					</div>
				</movable-area>
			</view>
		</div>
		<div class="end">{{ end }}</div>
	</section>
</template>

<script>
	export default {
		props: {
			audio: { type: Object, default: null },
		},
		mounted() {
			this.getBgWidth();
		},
		data() {
			return {
				bgWidth: 0,
				sliderX: 0,
				current: 0,
				duration: 0,
				progressWidth: "0%",
			};
		},
		computed: {
			currentTime() {
				if (!this.current) return "00:00";
				const minutes = Math.floor(this.current / 60);
				const seconds = Math.floor(this.current % 60);
				return `${minutes.toString().padStart(2, "0")}:${seconds
					.toString()
					.padStart(2, "0")}`;
			},

			end() {
				if (!this.duration) return "00:00";
				const minutes = Math.floor(this.duration / 60);
				const seconds = Math.floor(this.duration % 60);
				return `${minutes.toString().padStart(2, "0")}:${seconds
					.toString()
					.padStart(2, "0")}`;
			},
		},
		watch: {
			audio: {
				deep: true,
				immediate: true,
				handler(val) {
					if (!val) return;
					val.onTimeUpdate(() => {
						const { currentTime, duration } = val;
						this.duration = duration;
						this.current = currentTime;
						const percent = currentTime / this.duration;
						this.progressWidth = percent * 100 + "%";
						this.sliderX = percent * this.bgWidth;
					});
				},
			},
		},
		methods: {
			getBgWidth() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this).select("#bg");
					query
						.boundingClientRect((rect) => {
							if (!rect) return;
							const { width } = rect;
							this.bgWidth = rect.width;
						})
						.exec();
				});
			},

			handleStep(e) {
				const {
					detail: { x, source },
				} = e;
				if (source !== "touch" || !this.bgWidth) return;
				const percent = x / this.bgWidth;
				this.$emit("changeCurrent", this.duration * percent);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.progress-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 7px;
		height: 17px;
		color: #fff;
	}

	.current,
	.end {
		font-size: 12px;
	}

	.current {
		margin-right: 10px;
	}

	.end {
		margin-left: 10px;
	}

	.progress {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.bg {
			height: 4px;
			position: relative;
			background-color: rgba(#ebf9f5, 0.34);
		}

		.played {
			position: absolute;
			background-color: #31af91;
			height: 100%;
			left: 0;
			top: 0;
		}

		.slider {
			height: 9px;
			width: 9px;
			background-color: #31af91;
			border-radius: 50%;
			position: absolute;
			right: 0;
			top: -2.5px;
			transform: translateY(-50%);
			box-shadow: 0 0 3.08px 0 rgba(255, 255, 255, 0.59);
		}
	}
</style>
